<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.prime.com.tr/ui">
<ui:composition template="/template.xhtml">
	<ui:define name="center">


		<h:form id="form">
			<p:panel id="datas">
				<h:outputLabel value="Período de " style="margin-left: 270px" />
				<p:calendar value="#{beanAnalises.dataInicio}" size="6"
					pattern="dd/MM/yyyy" readOnlyInputText="true" />
				<h:outputLabel value="até " />
				<p:calendar value="#{beanAnalises.dataFim}" size="6"
					pattern="dd/MM/yyyy" readOnlyInputText="true" />
				<p:commandButton value="Analisar" action="#{beanAnalises.atualiza}"
					style="font-size:12pt;margin-left:10px" update="categorias recdes" />
				<h:selectOneRadio value="#{beanAnalises.opcaoRadioButton}">
					<f:selectItem itemLabel="Diário" itemValue="1" />
					<f:selectItem itemLabel="Semanal" itemValue="2" />
					<f:selectItem itemLabel="Mensal" itemValue="3" />
				</h:selectOneRadio>
			</p:panel>
		</h:form>
		<script type="text/javascript" src="jquery/highcharts.js"></script>
		<script type="text/javascript" src="jquery/exporting.js"></script>



		<p:tabView style="font-size:12pt" id="tabView">

			<p:tab id="tab1" title="Receita x Despesa">
				<h:form id="recdes">
					<script type="text/javascript">
		
			var chart;
			jQuery(document).ready(function() {
				chart = new Highcharts.Chart({
					chart: {
						renderTo: 'lineChart',
						defaultSeriesType: 'line',
						marginRight: 130,
						marginBottom: 25
					},
					title: {
						text: 'Receitas x Despesas',
						x: -20 //center
					},
					subtitle: {
						text: '',
						x: -20
					},
					xAxis: {
						categories: [#{beanAnalises.catChartLine}]
					},
					yAxis: {
						title: {
							text: 'Valor R$'
						},
						plotLines: [{
							value: 0,
							width: 1,
							color: '#808080'
						}]
					},
					tooltip: {
						formatter: function() {
				                return '<b>'+ this.series.name +'</b><br/>'+
								this.x +': '+' R$ '+ this.y;
						}
					},
					legend: {
						layout: 'vertical',
						align: 'right',
						verticalAlign: 'top',
						x: -10,
						y: 100,
						borderWidth: 0
					},
					series: [{
						name: 'Receita',
						data: [#{beanAnalises.lineChartReceita}]
					}, {
						name: 'Despesa',
						data: [#{beanAnalises.lineChartDespesa}]
					}]
				});
				
				
			});
				
		</script>
					<p:panel>


						<div id="lineChart"
							style="width: 800px; height: 500px; margin: 0 auto"></div>
					</p:panel>

				</h:form>
			</p:tab>
			<p:tab id="tab2" title="Categorias">
				<h:form id="categorias">
					<script type="text/javascript">
			var chart;
			jQuery(document).ready(function() {
				chart = new Highcharts.Chart({
					chart: {
						
						renderTo: 'pieReceita',
						plotBackgroundColor: null,
						plotBorderWidth: null,
						plotShadow: false,
						width: 450,
					},
					title: {
						text: 'Categorias de Receita'
					},
					tooltip: {
						formatter: function() {
							var x = this.percentage.toFixed(2);
							return '<b>'+ x +'%'+' R$:'+this.y+'</b>';
						}
					},
					plotOptions: {
						pie: {
							allowPointSelect: true,
							cursor: 'pointer',
							dataLabels: {
								enabled: true,
								color: '#000000',
								connectorColor: '#000000',
								formatter: function() {
									var x = this.percentage.toFixed(2);
									return '<b>'+this.point.name+'</b>';
								}
	
							}
						}
					},
				    series: [{
				    	type: 'pie',
						name: 'Browser share',
						data: [#{beanAnalises.pieChartReceita}]
					}]
				});
			});
			</script>

					<script type="text/javascript">
			var chart;
			jQuery(document).ready(function() {
				chart = new Highcharts.Chart({
					chart: {
						
						renderTo: 'pieDespesa',
						plotBackgroundColor: null,
						plotBorderWidth: null,
						plotShadow: false,
						width: 450,
					},
					title: {
						text: 'Categorias de Despesa'
					},
					tooltip: {
						formatter: function() {
							var x = this.percentage.toFixed(2);
							return '<b>'+ x +'%'+' R$:'+this.y+'</b>';
						}
					},
					plotOptions: {
						pie: {
							allowPointSelect: true,
							cursor: 'pointer',
							dataLabels: {
								enabled: true,
								color: '#000000',
								connectorColor: '#000000',
								formatter: function() {
									var x = this.percentage.toFixed(2);
									return '<b>'+this.point.name+'</b>';
								},
					showInLegend: true
							}
						}
					},
				    series: [{
				    	type: 'pie',
						name: 'Browser share',
						data: [#{beanAnalises.pieChartDespesa}]
					}]
				});
			});
			</script>
					<div id="pieReceita" style="float: right"></div>
					<div id="pieDespesa"></div>
					<p:panel>
						<h:panelGrid columns="2">
							<h:outputLabel value="Total de receitas neste período"
								style="font-size:14pt" />
							<h:outputLabel value="#{beanAnalises.totalReceita}"
								style="color:green;margin-left:30px;font-size:20pt">
								<f:convertNumber currencySymbol="R$ " type="currency" />
							</h:outputLabel>
							<h:outputLabel value="Total de despesas neste período"
								style="font-size:14pt" />
							<h:outputLabel value="#{beanAnalises.totalDespesa}"
								style="color:red;margin-left:30px;font-size:20pt">
								<f:convertNumber currencySymbol="R$ " type="currency" />
							</h:outputLabel>
							<h:outputLabel value="Saldo" style="font-size:14pt" />
							<h:outputLabel value="R$ #{beanAnalises.totalSaldo}"
								style="color:black;margin-left:30px;font-size:20pt">

							</h:outputLabel>
						</h:panelGrid>
					</p:panel>
				</h:form>
			</p:tab>



			<p:tab title="Metas de Despesa">
				<h:form>
					<p:panel id="panel">

						<script type="text/javascript">
		
			var chart;
			jQuery(document).ready(function() {
				chart = new Highcharts.Chart({
					chart: {
						renderTo: 'lineChartMetaDespesa',
						defaultSeriesType: 'line',
						marginRight: 130,
						marginBottom: 25
					},
					title: {
						text: 'Metas de Despesa',
						x: -20 //center
					},
					subtitle: {
						text: '',
						x: -20
					},
					xAxis: {
						categories: [#{beanAnalises.catChartMetaDespesa}]
					},
					yAxis: {
						title: {
							text: 'Valor R$'
						},
						plotLines: [{
							value: 0,
							width: 1,
							color: '#808080'
						}]
					},
					tooltip: {
						formatter: function() {
				                return this.x +': '+' R$ '+ this.y;
						}
					},
					legend: {
						layout: 'vertical',
						align: 'right',
						verticalAlign: 'top',
						x: -10,
						y: 100,
						borderWidth: 0
					},
					series: [{
						name: 'Meta',
						data: [#{beanAnalises.lineChartMetaDespesaMeta}]
					}, {
						name: 'Despesa',
						data: [#{beanAnalises.lineChartMetaDespesa}]
					}]
				});
				
				
			});
				
		</script>

						<div>
							<p:dataTable value="#{beanAnalises.listaMetaDespesa}" var="ld"
								paginator="true" rowsPerPageTemplate="10"
								style="width:400px;font-size:10pt"
								emptyMessage="Não há registros."
								selection="#{beanAnalises.metaDespesa}" selectionMode="single"
								rows="10">

								<p:column headerText="Tipo" style="width:210px">
									<h:outputText value="#{ld.categoria.nome}" />
									<h:outputText value=" " />
									<h:outputText value="#{ld.valor}">
										<f:convertNumber currencySymbol="R$ " type="currency" />
									</h:outputText>
								</p:column>

								<p:column headerText="Período">
									<h:outputText value="#{ld.dataInicio}">
										<f:convertDateTime pattern="dd/MM/yyyy" />
									</h:outputText>
									<h:outputText value=" a " />
									<h:outputText value="#{ld.dataFim}">
										<f:convertDateTime pattern="dd/MM/yyyy" />
									</h:outputText>
								</p:column>
							</p:dataTable>
							<p:commandButton onclick="act()" update="@form pan"
								value="Mostrar" style="margin-top:10px"></p:commandButton>
						</div>

						<div id="lineChartMetaDespesa" />

						<p:panel id="pan" style="font-size:14pt">
					#{beanAnalises.resultChartDespesa}
					</p:panel>

					</p:panel>


					<p:remoteCommand name="act"
						action="#{beanAnalises.columnChartMetaDespesa}" />
				</h:form>
			</p:tab>




			<p:tab title="Metas de Receita">
				<h:form>
					<p:panel id="panel">

						<script type="text/javascript">
		
			var chart;
			jQuery(document).ready(function() {
				chart = new Highcharts.Chart({
					chart: {
						renderTo: 'lineChartMetaReceita',
						defaultSeriesType: 'line',
						marginRight: 130,
						marginBottom: 25
					},
					title: {
						text: 'Metas de Receita',
						x: -20 //center
					},
					subtitle: {
						text: '',
						x: -20
					},
					xAxis: {
						categories: [#{beanAnalises.catChartMetaReceita}]
					},
					yAxis: {
						title: {
							text: 'Valor R$'
						},
						plotLines: [{
							value: 0,
							width: 1,
							color: '#808080'
						}]
					},
					tooltip: {
						formatter: function() {
				                return this.x +': '+' R$ '+ this.y;
						}
					},
					legend: {
						layout: 'vertical',
						align: 'right',
						verticalAlign: 'top',
						x: -10,
						y: 100,
						borderWidth: 0
					},
					series: [{
						name: 'Meta',
						data: [#{beanAnalises.lineChartMetaReceitaMeta}]
					}, {
						name: 'Receita',
						data: [#{beanAnalises.lineChartMetaReceita}]
					}]
				});
				
				
			});
				
		</script>

						<div>
							<p:dataTable value="#{beanAnalises.listaMetaReceita}" var="ld"
								paginator="true" rowsPerPageTemplate="10"
								style="width:400px;font-size:10pt"
								emptyMessage="Não há registros."
								selection="#{beanAnalises.metaReceita}" selectionMode="single"
								rows="10">

								<p:column headerText="Tipo" style="width:210px">
									<h:outputText value="#{ld.categoria.nome}" />
									<h:outputText value=" " />
									<h:outputText value="#{ld.valor}">
										<f:convertNumber currencySymbol="R$ " type="currency" />
									</h:outputText>
								</p:column>

								<p:column headerText="Período">
									<h:outputText value="#{ld.dataInicio}">
										<f:convertDateTime pattern="dd/MM/yyyy" />
									</h:outputText>
									<h:outputText value=" a " />
									<h:outputText value="#{ld.dataFim}">
										<f:convertDateTime pattern="dd/MM/yyyy" />
									</h:outputText>
								</p:column>
							</p:dataTable>
							<p:commandButton action="#{beanAnalises.columnChartMetaReceita}" update="@form"
								value="Mostrar" style="margin-top:10px"></p:commandButton>
						</div>

						<div id="lineChartMetaReceita" />

						<p:panel id="pan" style="font-size:14pt">
					#{beanAnalises.resultChartReceita}
					</p:panel>

					</p:panel>
				</h:form>
			</p:tab>

		</p:tabView>


	</ui:define>
</ui:composition>
</html>